<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">添加管理员</h1>
    <el-form
        ref="ruleFormRef"
        :model="addForm"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            v-model="addForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="phone">
        <el-input v-model="addForm.phone" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="addForm.name" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="addForm.sex" placeholder="请选择性别">
          <el-option label="男" value="MALE" />
          <el-option label="女" value="FEMALE" />
          <el-option label="无选择" :value="null" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit"
        >提交</el-button
        >
      </el-form-item>
    </el-form>
    <el-divider />

  </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {addAdmin, searchUsersNotAdmin} from "@/api/counter";
import {ElMessage} from "element-plus";

const open2 = () => {
  ElMessage({
    showClose: true,
    message: '成功添加',
    type: 'success',
  })
}
const open4 = (message) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  })
}

const addForm = ref({

});

const submit = () => {
  console.log(addForm.value);
  addAdmin(addForm.value).then((res) => {
    if(res.state !== 0) {
      open4(res.message);
    } else {
      open2();
    }
  });
}


</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
</style>